<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>规格管理</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
<!-- .box-body -->
<div class="box-header with-border">
	<h3 class="box-title">规格管理</h3>
</div>
<div class="box-body">
	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()"><i class="fa fa-trash-o"></i>删除</button>
					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">
				规格名称：<input type="text" id="Name">
				<button class="btn btn-default" onclick="getData()">查询</button>
			</div>
		</div>
		<!--工具栏/-->
		<!--数据列表-->
		<div id="specification"></div>
		<div th:insert="page.html"></div>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 模态增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">规格编辑</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>规格名称</td>
						<td><input id="specName2" name="specName" class="form-control" placeholder="规格名称" >  </td>
					</tr>
				</table>

				<!-- 规格选项 -->
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" ><i class="fa fa-file-o"></i> 新增规格选项</button>

				</div>

				<table id="specTable" class="table table-bordered table-striped table-hover dataTable">
					<thead>
					<tr>
						<th class="sorting">规格选项</th>
						<th class="sorting">排序</th>
						<th class="sorting">操作</th>
					</thead>
					<tbody>
					<tr>
						<td>
							<input  class="form-control" placeholder="规格选项">
						</td>
						<td>
							<input  class="form-control" placeholder="排序">
						</td>
						<td>
							<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
						</td>
					</tr>
					<tr>

						<td>
							<input  class="form-control" placeholder="规格选项">
						</td>
						<td>
							<input  class="form-control" placeholder="排序">
						</td>
						<td>
							<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
						</td>
					</tr>
					<tr>
						<td>
							<input  class="form-control" placeholder="规格选项">
						</td>
						<td>
							<input  class="form-control" placeholder="排序">
						</td>
						<td>
							<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal"  onclick="toAdd()" aria-hidden="true">增加</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<!-- 模态修改窗口 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel2">规格编辑</h3>
			</div>
			<div class="modal-body">
				<div id="update_id"></div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal"  onclick="updateInfo()" aria-hidden="true">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<script>
	//页面加载函数
	$(function (){
		getData();
	})
	//查询所有信息
	function getData(){
		$.ajax({
			url:"/specificationController/specificationList",
			type:"post",
			dataType:"json",
			data:{specName:$("#Name").val(),pageNum:$("#pageNum").val(),pageSize:$("#pageSize").val()},
			async:false,
			success:function (result){
				var page = result.data;
				var list = page.rows;
					var table="";
					table +='<table id=\"dataList\" class=\"table table-bordered table-striped table-hover dataTable\">';
					table +='<thead>';
					table +='<tr>';
					table +='<th className="" style="padding-right:0px">';
					table +='<input id="selall" type="checkbox"  className="icheckbox_square-blue">';
					table +='</th>';
					table +='<th className="sorting_asc">规格ID</th>';
					table +='<th className="sorting">规格名称</th>';
					table +='<th className="text-center">操作</th>';
					table +='</tr>';
					table +='</thead>';
					table +='<tbody>';
					for (var i = 0; i < list.length; i++) {
						table +='<tr>';
						table +='<td><input type="checkbox" name="box" value="'+list[i].id+'"></td>';
						table +='<td>'+list[i].id+'</td>';
						table +='<td>'+list[i].specName+'</td>';
						table+='<td className="text-center">';
						table+='<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" onclick="selectSpecById('+list[i].id+')" data-target="#updateModal">修改</button>';
						table+='</td>';
						table+='</tr>';
					}
					table +='</tbody>';
					table +="</table>";
				$("#specification").html(table);
				buildPage(page);

			},
		})
	}
	function toAdd() {
		var specName = $("#specName2").val();
		//遍历table取值
		var optionsList = [];
		var trList = $("#specTable").find("tr");
		for (var i = 1; i < trList.length; i++) {
			var tdList = $(trList[i]).find("td");
			var optionName = $(tdList[0]).find("input").val();
			var orders = $(tdList[1]).find("input").val();
			var optionJson = {optionName: optionName, orders: orders}
			optionsList.push(optionJson)
		}
		//对象与字符串转换的工具类
		var options = JSON.stringify(optionsList);
		$.ajax({
			url: "/specificationController/increasInfo",
			data: {specName: specName, options: options},
			dataType: "json",
			async: false,
			type: "post",
			success: function (result) {
				alert("增加成功")
			}
		})
	}
	//根据id进行回显
	function selectSpecById(id){
		$.ajax({
			url:"/specificationController/toUpdate/"+id,
			type :"post",
			dataType:"json",
			async:false,
			success:function (result){
				var list = result.data;
				var table = "<table class=\"table table-bordered table-striped\"  width=\"800px\"><tr>";
				table += "<input type='hidden' id='id' value='"+list.tbSpecification.id+"'>";
				table += "<td>规格名称</td>";
				table += "<td><input  class=\"form-control\" id='specName3' value='"+list.tbSpecification.specName+"' placeholder=\"规格名称\" ></td></tr></table>";
				table += "<div class='btn-group'>";
				table += "<button type=\"button\" class=\"btn btn-default\" title=\"新建\" ><i class=\"fa fa-file-o\"></i> 新增规格选项</button></div>";
				table += "<table id=\"specTable3\" class=\"table table-bordered table-striped table-hover dataTable\">"
				table += "<thead><tr><th class=\"sorting\">规格选项</th>"
				table += "<th class='sorting'>排序</th>";
				table += "<th class=\"sorting\">操作</th></thead>";
				for (var i = 0; i < list.optionList.length; i++) {
					table += "<tbody><tr><td><input  class=\"form-control\" value='"+list.optionList[i].optionName+"' placeholder=\"规格选项\"></td>";
					table += "<td><input  class=\"form-control\" value='"+list.optionList[i].orders+"'  placeholder=\"排序\"></td>"
					table += "<td><button type=\"button\" class=\"btn btn-default\" title=\"删除\" ><i class=\"fa fa-trash-o\"></i> 删除</button></td></tr>"
				}
				table += "</tbody>";
				$("#update_id").html(table);
			}
		})
	}
	//根据id修改规格信息
	//和增加方法一样 定义数组 遍历table 获取输入框中规格的值
	function updateInfo() {
		var optionsList = [];//js中表示集合,数组
		//获取表格中的行
		var trs = $("#specTable3").find("tr")
		//只是遍历的一个tr
		for (var i = 1; i <trs.length ; i++) {
			//转成jquery对象,获取每一行的列
			var tds =$(trs[i]).find("td")
			//获取规格输入框的值
			var optionName = $(tds[0]).find("input").val();
			//获取排序输入框的值
			var orders = $(tds[1]).find("input").val();
			optionsList.push({optionName:optionName,orders:orders})
		}
		//把json数组转成字符串
		var optionsListJson = JSON.stringify(optionsList)
		$.ajax({
			url: "/specificationController/updateInfo",
			type: "post",
			dataType: "json",
			data: {specName: $("#specName3").val(), id: $("#id").val(), optionsListJson: optionsListJson},
			async: false,
			success: function (result) {
				if (result.code == 10000) {
					alert("修改成功");
					window.location.reload()
				}
			},
		})
	}
	//批量删除
	//批量删除
	function deleteAll(){
		var boxs = $("[name=box]:checked")
		var ids =[];
		$(boxs).each(function (i,e){
			ids.push(e.value);
		})
		$.ajax({
			url :"/specificationController/deleteByIds/"+ids,
			type:"post",
			dataType:"json",
			async:true,
			success:function (result){
				if (result.code==10000){
					alert("删除成功");
					window.location.reload();
				}
			},
		})
	}
</script>
</body>

</html>